<div class="form-field">
<#if form.mode == "view">
    <div class="viewmode-field">
        <#if field.mandatory && !(field.value?is_number) && field.value == "">
        <span class="incomplete-warning"><img src="${url.context}/res/components/form/images/warning-16.png" title="${msg("form.field.incomplete")}" /><span>
        </#if>
        <span class="viewmode-label">${field.label?html}:</span>
        <#if field.control.params.activateLinks?? && field.control.params.activateLinks == "true">
            <#assign fieldValue=field.value?html?replace("((http|ftp|https):\\/\\/[\\w\\-_]+(\\.[\\w\\-_]+)+([\\w\\-\\.,@?\\^=%&:\\/~\\+#]*[\\w\\-\\@?\\^=%&\\/~\\+#])?)", "<a href=\"$1\" target=\"_blank\">$1</a>", "r")>
        <#else>
            <#if field.value?is_number>
                <#assign fieldValue=field.value?c>
            <#else>
                <#assign fieldValue=field.value?html>
            </#if>
        </#if>
        <span class="viewmode-value"><#if fieldValue == "">${msg("form.control.novalue")}<#else>${fieldValue}</#if></span>
    </div>
<#else>
    <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
    <input id="${fieldHtmlId}" name="${field.name}" tabindex="0" onchange="getSiuDokPav(this.value)"
           <#if field.control.params.password??>type="password"<#else>type="text"</#if>
           <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
           <#if field.control.params.style??>style="${field.control.params.style}"</#if>
           <#if field.value?is_number>value="${field.value?c}"<#else>value="${field.value?html}"</#if>
           <#if field.description??>title="${field.description}"</#if>
           <#if field.control.params.maxLength??>maxlength="${field.control.params.maxLength}"</#if>
           <#if field.control.params.size??>size="${field.control.params.size}"</#if>
           <#if field.disabled && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if> />
    <@formLib.renderFieldHelp field=field />
<script type="text/javascript">//<![CDATA[
    var fieldValueSiuKod = "${field.value}";
    var idSiuKod = "${fieldHtmlId}";
    var fieldsSiuKod = idSiuKod.split(/_rcc_/);
    var propertyIdSiuKod = fieldsSiuKod[0]+"_rcc_";
    var f1SiuKod = "${field.control.params.fieldSiuId1}";
    var f2SiuKod = "${field.control.params.fieldSiuId2}";
    var f3SiuKod = "${field.control.params.fieldSiuId3}";
    var fieldId1SiuKod = propertyIdSiuKod+f1SiuKod;
    var fieldId2SiuKod = propertyIdSiuKod+f2SiuKod;
    var fieldId3SiuKod = propertyIdSiuKod+f3SiuKod;

    function changeNumber(num) {
        return num.replace(/,/g, '');
    }

    function trigerKeyEvent(elemId){
        if (document.createEvent) {
            var myEv = document.createEvent('KeyboardEvent');
            myEv.initKeyboardEvent('keyup', true, true, null, false, false, false, false, 76, 0);
            $('#'+elemId).each(function() {this.dispatchEvent(myEv);});
        } else if (document.createEventObject) {
            var myEv = document.createEventObject();
            $('#'+elemId).each(function() {this.fireEvent("onkeyup", myEv);});
        }
    }

    if (fieldValueSiuKod.length > 0 && fieldValueSiuKod != "" && fieldValueSiuKod != null) {
        var updateOnLoadSiuDokPav = function(res) {
            var result = eval('(' + res.serverResponse.responseText + ')');
            if (result) {
                if (result.Kodas.length > 0 && result.Kodas[0] != 'None' ) {
                    if (result.FilialoId.length > 0 && result.FilialoId[0] != 'None') {
                        var selVal = document.getElementById(fieldId2SiuKod).value;
                        $('#'+fieldId2SiuKod).empty();var option = '<option value=""></option>';$('#'+fieldId2SiuKod).append(option);
                        for (var j = 0; j < result.FilialoId.length; j++) {
                            var option = "<option value=" + "'" + result.FilialoId[j] + "'" + ">"+ result.FilialoPav[j] + "</option>";
                            $('#'+fieldId2SiuKod).append(option);
                            if(result.FilialoId[j] === selVal) {
                                $("select#" + fieldId2SiuKod + " option:eq("+(j+1)+")").attr('selected', true);
                            }
                        }
                    } else {}
                } else {}
            } else {}
        };

        Alfresco.util.Ajax.jsonGet({
            url : Alfresco.constants.PROXY_URI + "doc/metadata/jarDuomenys?code="+ changeNumber(fieldValueSiuKod)+"&type=jar",
            successCallback : {
                fn : updateOnLoadSiuDokPav,
                scope : this
            },
            failureCallback : {
                fn : function() {},
                scope : this
            }
        });
    }

    function getSiuDokPav(code){
        if(code != null && code != "" && code != undefined) {
            var updateSiuDokPav = function(res) {
                var result = eval('(' + res.serverResponse.responseText + ')');
                if (result) {
                    if (result.Kodas.length > 0 && result.Kodas[0] != 'None' ) {
                        document.getElementById(fieldId1SiuKod).value = result.Pavadinimas[0];
                        var option = '<option value=""></option>';$('#'+fieldId2SiuKod).empty();$('#'+fieldId3SiuKod).empty();$('#'+fieldId2SiuKod).append(option);$('#'+fieldId3SiuKod).append(option);
                        if (result.FilialoId.length > 0 && result.FilialoId[0] != 'None') {
                            for (var j = 0; j < result.FilialoId.length; j++) {
                                var option = "<option value=" + "'" + result.FilialoId[j] + "'" + ">"+ result.FilialoPav[j] + "</option>";
                                $('#'+fieldId2SiuKod).append(option);
                            }
                        } else{
                            var option = '<option value=""></option>';$('#'+fieldId2SiuKod).empty();$('#'+fieldId3SiuKod).empty();$('#'+fieldId2SiuKod).append(option);$('#'+fieldId3SiuKod).append(option);
                        }
                    } else {
                        document.getElementById(fieldId1SiuKod).value = "";
                        var option = '<option value=""></option>';$('#'+fieldId2SiuKod).empty();$('#'+fieldId3SiuKod).empty();$('#'+fieldId2SiuKod).append(option);$('#'+fieldId3SiuKod).append(option);
                    }
                } else {
                    document.getElementById(fieldId1SiuKod).value = "";
                    var option = '<option value=""></option>';$('#'+fieldId2SiuKod).empty();$('#'+fieldId3SiuKod).empty();$('#'+fieldId2SiuKod).append(option);$('#'+fieldId3SiuKod).append(option);
                }
                trigerKeyEvent(idSiuKod);
            };

            Alfresco.util.Ajax.jsonGet({
                url : Alfresco.constants.PROXY_URI + "doc/metadata/jarDuomenys?code="+ changeNumber(code)+"&type=jar",
                successCallback : {
                    fn : updateSiuDokPav,
                    scope : this
                },
                failureCallback : {
                    fn : function() {},
                    scope : this
                }
            });
        } else{}
    }//]]>

    </script>
</#if>
</div>